<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>TeaCMS-后台管理</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <script src="/static/plugins/pace-0.7.5/pace.js"></script>
    <link href="/static/plugins/pace-0.7.5/themes/black/pace-theme-center-circle.css" rel="stylesheet" />
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="/static/css/AdminLTE.min.css">
    <!-- AdminLTE Skins. Choose a skin from the css/skins
         folder instead of downloading all of them to reduce the load. -->
    <link rel="stylesheet" href="/static/css/skins/my_all-skins.css">
    <!-- MyAdminLTE.css -->
    <link rel="stylesheet" href="/static/css/MyAdminLTE.css">

    <!-- Lobibox -->
    <link rel="stylesheet" href="/static/plugins/lobibox/css/lobibox.min.css">

    <style>
        @media screen and (max-width: 760px) {
            .tab {
                padding: 0
            }
        }
    </style>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body class="hold-transition skin-blue sidebar-mini fixed">
<#import "/_admin/lib/sidebar_templet.ftl" as sidebar_templet>
<!-- Site wrapper -->
<div class="wrapper">
<#-- header -->
<#include "/_admin/header.ftl">
<#-- sidebar -->
<@sidebar_templet.sidebar "banner"></@sidebar_templet.sidebar>
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>
                轮播
                <small>Banner</small>
            </h1>
        </section>

        <!-- Main content -->
        <section id="app" class="content">

            <!-- Default box -->
            <div class="col-md-5" style="padding: 0">
                <div class="box box-primary" id="boxAdd">
                    <form id="addBannerForm" method="post">
                        <div class="box-header with-border">
                            <h3 class="box-title">添加Banner</h3>
                        </div>
                        <!-- /.box-header -->
                        <div class="box-body">
                            <div class="form-group">
                                <label class="form-inline">文章</label>
                                <select class="form-control" name="articleId">
                                <#list allBannerArticle as item>
                                    <option value="${item.id}">${item.articleTitle}</option>
                                </#list>
                                </select>
                                <small class="form-inline">请选手Banner预览的文章。</small>
                            </div>
                            <div class="form-group">
                                <label class="form-inline">排序</label>
                                <input type="number" class="form-control" name="order" placeholder="0,1,2,3,4,5,6,7...">
                                <small>排序是Banner预览的顺序。 <b>注:</b>只能输入数字</small>
                            </div>

                        </div>
                        <!-- /.box-body -->
                        <div class="box-footer clearfix">
                            <button class="btn btn-success pull-right">添加</button>
                        </div>
                    </form>
                </div>

                <div class="box box-primary" id="boxUpdate">
                    <div class="box-header with-border">
                        <h3 class="box-title">修改Banner</h3>
                        <div class="box-tools pull-right">
                            <button type="button" class="btn btn-box-tool" v-on:click="showBoxAdd()"><i class="fa fa-remove"></i></button>
                        </div>
                    </div>
                    <form id="updateBannerForm" method="post">
                        <!-- /.box-header -->
                        <div class="box-body">
                            <label class="form-inline">Banner ID: <b v-text="alertBanner.id">1</b></label>
                            <input type="hidden" name="id" v-model="alertBanner.id">
                            <div class="form-group">
                                <label class="form-inline">文章</label>
                                <select class="form-control" name="articleId">
                                <#list allBannerArticle as item>
                                    <option value="${item.id}" v-if="alertBanner.articleId == ${item.id}"
                                            selected>${item.articleTitle}</option>
                                    <option value="${item.id}" v-else>${item.articleTitle}</option>
                                </#list>
                                </select>
                                <small class="form-inline">请选手Banner预览的文章。</small>
                            </div>
                            <div class="form-group">
                                <label class="form-inline">排序</label>
                                <input type="number" class="form-control" name="order" v-model="alertBanner.order" placeholder="0,1,2,3,4,5,6,7...">
                                <small>排序是Banner预览的顺序。 <b>注:</b>只能输入数字</small>
                            </div>

                        </div>
                        <!-- /.box-body -->
                        <div class="box-footer clearfix">
                            <button type="submit" class="btn btn-success pull-right">修改</button>
                        </div>
                    </form>
                </div>
            </div>
            <div class="col-md-7 tab">
                <div class="box box-primary">

                    <div class="box-body">
                        <table class="table table-hover">
                            <thead>
                            <tr>
                                <th># ID</th>
                                <th>文章ID</th>
                                <th>标题</th>
                                <th>排序</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="item in allBanner">
                                <td v-text="item.id"></td>
                                <td v-text="item.articleId"></td>
                                <td v-text="item.articleTitle"></td>
                                <td v-text="item.order"></td>
                                <td>
                                    <button class="btn btn-xs btn-primary" v-on:click="updateBanner(item)">修改</button>
                                    <button class="btn btn-xs btn-danger" v-on:click="deleteBanner(item)">删除</button>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div>
                    <h4><strong>注：</strong><br></h4>

                    <p>删除Banner会删除<strong>Banner</strong>。</p>
                </div>
            </div>
            <div class="clearfix"></div>
        </section>
        <!-- /.content -->

    </div>
    <!-- /.content-wrapper -->

<#include "/_admin/footer.ftl">

    <!-- Add the sidebar's background. This div must be placed
         immediately after the control sidebar -->
    <div class="control-sidebar-bg"></div>
</div>
<!-- ./wrapper -->

<!-- jQuery 2.2.3 -->
<script src="/static/plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="/static/js/bootstrap.min.js"></script>
<!-- vue.js -->
<script src="/static/plugins/vue/vue.js"></script>
<!-- SlimScroll -->
<script src="/static/plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="/static/plugins/fastclick/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="/static/js/app.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="/static/js/demo.js"></script>
<script src="/static/js/common.js"></script>
<script src="/static/plugins/lobibox/js/lobibox.min.js"></script>

<script>
    $(function () {
        $("#boxUpdate").hide();
        function deletMSG(type, msg) {
            Lobibox.notify(type, {
                size: 'mini',
                soundPath: '/static/plugins/lobibox/sounds/',
                position: 'center bottom',
                msg: msg
            });
        }

        var vm = new Vue({
            el: "#app",
            data: {
                allBanner: null,
                alertBanner: {
                    id: null,
                    articleId: null,
                    order: null
                }
            },
            methods: {
                deleteBanner: function (item) { //删除Banner
                    if (vm.allBanner.length == 1) {
                        deletMSG('error', '至少保留一条记录');
                        return;
                    }
                    ajaxSubmit("/admin/deletebanner/" + item.id, null,
                            function (data) {
                                if (data >= 1) {
                                    deletMSG('success', '删除成功!');
                                    getAllBanner();
                                } else {
                                    deletMSG('error', '删除失败!');
                                }
                            },
                            function () {
                                deletMSG('error', '网络错误，请刷新!');
                            }
                    )
                },
                updateBanner: function (item) {
                    $("#boxAdd").hide();
                    $("#boxUpdate").fadeIn(300);
                    vm.alertBanner = item;
                },
                showBoxAdd: function () {
                    $("#boxUpdate").hide();
                    $("#boxAdd").fadeIn(300);
                    vm.alertBanner = {
                        id: null,
                        articleId: null,
                        order: null
                    };
                }
            }
        });
        getAllBanner();
        function getAllBanner() {
            ajaxSubmit("/admin/findallbanner", null,
                    function (data) {
                        console.log(data.obj)
                        vm.allBanner = data.obj;
                    },
                    function () {
                        deletMSG('error', '网络错误，请刷新!');
                    }
            )
        }

        $('#addBannerForm').submit(function () {
            ajaxSubmitForm("/admin/addbanner", $(this).serialize(),
                    function (data) {
                        if (data == -1) {
                            deletMSG('error', '请输入排序!');
                        } else if (data >= 1) {
                            deletMSG('success', '添加成功!');
                            getAllBanner();
                        } else {
                            deletMSG('error', '添加失败!');
                        }
                    },
                    function (data) {
                        deletMSG('error', '网络错误，请刷新!');
                    }
            );

            return false; //阻止表单默认提交
        });

        $('#updateBannerForm').submit(function () {
            ajaxSubmitForm("/admin/updatebanner", $(this).serialize(),
                    function (data) {
                        if (data == -1) {
                            deletMSG('error', '请输入排序!');
                        } else if (data >= 1) {
                            deletMSG('success', '更新成功!');
                            getAllBanner();
                        } else {
                            deletMSG('error', '更新失败!');
                        }
                    },
                    function (data) {
                        deletMSG('error', '网络错误，请刷新!');
                    }
            );

            return false; //阻止表单默认提交
        });
    });
</script>

</body>
</html>